<template>
  <div class="wrapper">
    <div
      style="margin: 200px auto;margin-top: 180px;  background-color: #fff; width: 350px; height: 335px; padding: 20px; border-radius: 10px">
      <div style="margin: 20px 0; text-align: center; font-size: 24px">
        <b>后台系统登录</b>
      </div>
      <!-- :rules="rules"表单对应规则 :model="user"必须加上-->
      <el-form :model="user" :rules="rules" ref="userForm">
        <el-form-item prop="username">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password
            v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item prop="verificationCode">
          <el-input v-model="user.verificationCode" placeholder="请输入验证码" prefix-icon="el-icon-s-check" clearable
            style="margin: 0px 0;width: 60%;" />
          <div @click="refreshCode" style="float: right;">
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
        </el-form-item>

        <el-form-item style="margin: 10px 0; text-align: right">
          <el-button type="warning" size="small" autocomplete="off" @click="
              $router.push('/register');
              $message.success('欢迎来到注册页面');
            ">注册
          </el-button>
          <el-button type="primary" size="small" autocomplete="off" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {
    setRoutes
  } from "../router";
  import SIdentify from '../pages/utilComponent/SIdentify.vue';

  export default {
    name: "Login",
    components: {
      SIdentify
    }, //写在export default{}中与data同级表示使用组件
    data() {
      return {
        identifyCode: '',
        identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
        user: {
          username: "",
          password: ""
        },
        rules: {
          username: [{
              required: true,
              message: "请输入用户名",
              trigger: "blur"
            },
            {
              min: 1,
              max: 20,
              message: "长度在1-20",
              trigger: "blur"
            }
          ],
          password: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              min: 1,
              max: 20,
              message: "长度在1-20",
              trigger: "blur"
            }
          ],
          verificationCode: [{
            required: true,
            message: '验证码不能为空',
            trigger: 'blur'
          }]
        }
      };
    },
    methods: {
      login() {
        // if (this.user.verificationCode !== this.identifyCode) {
        //   this.$message.error("验证码错误！");
        //   return;
        // }
        const that = this;
        this.$axios
          .post("/user/login", {
            userName: that.user.username,
            passWord: that.user.password
          })
          .then(function (response) {
            if (response.data.code === "200") {
              localStorage.setItem("user", JSON.stringify(response.data.data));
              localStorage.setItem(
                "menus",
                JSON.stringify(response.data.data.menus)
              );
              // 动态设置当前用户的路由
              setRoutes();
              that.$message.success("登入成功");
              that.$router.push("/home");
              localStorage.setItem(
                "token",
                JSON.stringify(response.data.data.token)
              );
            } else {
              that.$message.error(response.data.msg);
            }
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });
      },
      // 刷新验证码
      refreshCode() {
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4);

      },
      makeCode(o, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
        }
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
    },
    mounted() {
      this.identifyCode = '';
      this.makeCode(this.identifyCodes, 4);
    },
  };

</script>

<style>
  .wrapper {
    height: 100vh;
    background-image: linear-gradient(to bottom right, #8bc6ec, #e0c3fc);
    overflow: hidden;
  }

</style>
